<template>
  <div class="MineCont">
    <statistics-coal v-if="staticActive"></statistics-coal>
    <!-- 搜索按钮和图标按钮控件 -->
    <div class="controlCont">
      <div
        :class="['controlSearch',searchActive?'controlSearch-active':'']"
        @click="searchActive = !searchActive"
      ></div>
      <div
        :class="['controlStatic',staticActive?'controlStatic-active':'']"
        @click="staticActive = !staticActive"
      ></div>
    </div>
    <!-- 搜索区域 -->
    <div class="searchArea" v-if="searchActive">
      <input
        type="number"
        min="1"
        max="10000"
        class="inputLable"
        placeholder="请输入矿山名称"
        v-model="mineName"
      />
      <div class="searchWord">
        <div class="getButton" @click="getData">搜索</div>
        <div class="restButton" @click="resetData"></div>
      </div>
    </div>

    <!-- 图例显示 -->
    <div class="map-legend"></div>
    <!-- 指北针显示 -->
    <div class="map-compass"></div>
  </div>
</template>

<script>
import StatisticsCoal from "../Statistics/StatisticsCoal.vue";
import { GeoJSON } from "ol/format";

import { Style, Icon } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import MineAreaJson from "../../../../../static/火区点数据.json";
export default {
  props: {
    MineMap: Object
  },
  components: {
    StatisticsCoal
  },
  data() {
    return {
      searchActive: false,
      staticActive: true,
      mineName: ""
    };
  },
  mounted() {
    this.handleDrawMineLayer();
  },
  beforeDestroy() {
    this.dispose();
  },
  methods: {
    getData() {},
    resetData() {
      this.mineName = "";
      this.$emit("MineBackTo");
    },
    dispose() {
      const minelayer = this.findLayerById("minelayer");
      this.MineMap.removeLayer(minelayer);
    },
    findLayerById(id) {
      const layers = this.MineMap.getLayers();
      let res;
      layers.array_.forEach(layer => {
        if (layer.values_.id && layer.values_.id === id) {
          res = layer;
        }
      });
      return res;
    },
    // 加载矿山数据
    handleDrawMineLayer() {
      const features = new GeoJSON().readFeatures(MineAreaJson, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:4326"
      });
      const styleJingGong = new Style({
        image: new Icon({
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: require("../../../../assets/img/OneMap/井.png")
        })
      });
      const styleLouTian = new Style({
        image: new Icon({
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: require("../../../../assets/img/OneMap/露.png")
        })
      });
      const styleWeiKuang = new Style({
        image: new Icon({
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: require("../../../../assets/img/OneMap/尾.png")
        })
      });

      features.forEach(item => {
        if (item.values_.ZLSX === "已治理") {
          item.setStyle(styleJingGong);
        } else if (item.values_.ZLSX === "未治理") {
          item.setStyle(styleLouTian);
        } else {
          item.setStyle(styleWeiKuang);
        }
      });
      const source = new VectorSource({
        features
      });
      const layer = new VectorLayer({
        source: source
      });
      layer.set("id", "minelayer");
      this.MineMap.addLayer(layer);
    }
  }
};
</script>

<style lang="scss" scoped>
.MineCont {
  width: 100%;
  height: 100%;
  .controlCont {
    position: absolute;
    top: 100px;
    right: 70px;
    width: 124px;
    height: 52px;
    display: flex;
    direction: row;
    justify-content: space-between;
    .controlSearch {
      width: 52px;
      height: 52px;

      background: url("../../../../assets/img/Home/搜索1.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .controlSearch-active {
      background: url("../../../../assets/img/Home/搜索2.png") no-repeat;
      background-size: 100% 100%;
    }
    .controlStatic {
      width: 52px;
      height: 52px;

      background: url("../../../../assets/img/Home/图表打开按钮.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .controlStatic-active {
      background: url("../../../../assets/img/Home/图表打开按钮2.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .searchArea {
    position: absolute;
    top: 96px;
    right: 200px;
    width: 380px;
    height: 60px;
    background: url("../../../../assets/img/Home/搜索背景切图.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    direction: row;
    .inputLable {
      padding-left: 50px;
      background: transparent; //去掉背景
      border: none; //去掉边框
      outline: none;
      width: 280px;
      // 提示文字样式
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      font-size: 18px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #999999;
    }
    .searchWord {
      width: 100px;
      line-height: 60px;
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      font-size: 18px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      color: #fff;
      display: flex;
      direction: row;

      .getButton {
        width: 52px;
        margin-left: 10px;
        cursor: pointer;
      }
      .restButton {
        margin-top: 23px;

        width: 15px;
        height: 15px;
        background: url("../../../../assets/img/Home/关闭.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
  .map-legend {
    position: absolute;
    left: 35px;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: url("../../../../assets/img/OneMap/矿山图例.png") no-repeat;
    background-size: 100% 100%;
    z-index: 9999;
    pointer-events: none;
  }
  .map-compass {
    position: absolute;
    left: 35px;
    top: 110px;
    width: 30px;
    height: 30px;
    background: url("../../../../assets/img/Home/指北针.png") no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    pointer-events: none;
  }
}
// 去除输入框的默认样式
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
</style>
